<!-- 新闻资讯 -->
<template>
  <div id="newsInfo">
    <div class="center">
      <NavTitle>
        <template #left>
          <div class="title">新闻资讯</div>
          <div class="info">NEWS AND INFORMATION</div>
        </template>
      </NavTitle>
      <div class="lists">
        <template v-for="item in state.articleList" :key="item._id">
          <div class="list">
            <div class="header">
              <div class="title">
                <a :href="'/article/' + item._id" target="blank">{{
                  item.title
                }}</a>
              </div>
              <div class="time" v-format-time="'YYYY-MM-DD'">
                {{ item.time }}
              </div>
            </div>
            <div class="des">
              {{ item.des }}
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { NavTitle } from '@/components/client/public'
import {
  getEffectData,
  ArticleListDataTypes
} from '@/server/client/api_article'

const state = reactive({
  articleList: [] as Array<ArticleListDataTypes>
})

const { data: articleList } = await getEffectData(0, 4)
state.articleList = articleList.data.articleList
</script>

<style scoped lang="less">
#newsInfo {
  margin-top: 100px;
  background-color: #fff;
  .center {
    width: 1200px;
    margin: 0 auto;
    .lists {
      padding: 25px 0 35px;
      display: grid;
      grid-template-columns: repeat(2, 570px);
      grid-auto-rows: 130px;
      gap: 30px 60px;
      .list {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #ece7e7;
        .header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 30px;
          line-height: 30px;
          .title {
            font-size: 16px;
            color: #333333;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            a {
              color: #333333;
              &:hover {
                color: #f13a3a;
              }
            }
          }
          .time {
            color: #999;
            font-size: 14px;
            margin-left: 100px;
          }
        }
        .des {
          white-space: nowrap;
          width: 570px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          color: #878787;
          margin: 30px 0;
        }
      }
    }
  }
}
</style>
